CSS-in-JS와 전통적인 CSS 비교

React를 사용하다 보면 스타일링에도 다양한 방법이 존재한다는 것을 알게 됩니다. 이 글에서는 CSS-in-JS와 전통적인 CSS를 비교하며 각각의 장단점과 사용하는 방법을 알아보겠습니다.

CSS-in-JS란?

CSS-in-JS는 JavaScript 파일 내에서 CSS를 작성하는 방법입니다. 스타일을 컴포넌트에 직접 적용할 수 있어 모듈화와 관리가 쉬워지는 장점이 있습니다. 가장 많이 사용되는 라이브러리로는 Styled-Components와 Emotion이 있습니다.

Styled-Components 예제

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>Click Me</Button>;
}

export default App;

장점

컴포넌트 단위 스타일링: 각 컴포넌트에 고유한 스타일을 적용할 수 있습니다.
동적 스타일링: props를 이용해 동적으로 스타일을 변경할 수 있습니다.
전역 스타일 오염 방지: CSS 클래스 이름 충돌이 없습니다.

단점

러닝 커브: 새로운 문법과 사용법을 익혀야 합니다.
성능 이슈: 대규모 프로젝트에서는 성능 최적화가 필요할 수 있습니다.

전통적인 CSS란?

전통적인 CSS는 CSS 파일을 별도로 작성하고 HTML 요소에 클래스를 적용하는 방식입니다. CSS 파일은 프로젝트 구조 내에서 별도로 관리됩니다.

전통적인 CSS 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>
<body>
  <button class="button">Click Me</button>
</body>
</html>

/* styles.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

장점

넓은 호환성: 대부분의 웹 프로젝트에서 사용되며, 새로운 기술을 배우지 않아도 됩니다.
성능: 추가적인 JavaScript 연산 없이 브라우저가 스타일을 바로 적용합니다.
분리된 스타일 시트: HTML과 CSS의 명확한 분리로 구조와 스타일을 독립적으로 관리할 수 있습니다.

단점

전역 네임스페이스: 클래스 이름 충돌이 발생할 수 있습니다.
동적 스타일링 한계: JavaScript를 통해 직접적으로 스타일을 조작하기 어렵습니다.

더 알아보기

CSS-in-JS: JavaScript 내에서 CSS를 작성하는 방식으로, Styled-Components와 Emotion 같은 라이브러리를 통해 구현할 수 있습니다.
전통적인 CSS: 외부 CSS 파일을 작성하고 HTML 파일에서 이를 링크하여 스타일링하는 방법입니다. CSS의 기본 문법과 사용법을 익히는 것이 중요합니다.
Styled-Components: CSS-in-JS의 대표적인 라이브러리로, JavaScript 내에서 컴포넌트 단위로 스타일을 작성할 수 있습니다.
Emotion: 또 다른 CSS-in-JS 라이브러리로, 성능 최적화와 동적 스타일링에 강점을 가지고 있습니다.

내용 요약

CSS-in-JS와 전통적인 CSS는 각각의 장단점이 있습니다. CSS-in-JS는 컴포넌트 단위로 스타일을 관리할 수 있어 모듈화와 동적 스타일링이 용이하지만, 러닝 커브와 성능 이슈가 있을 수 있습니다. 반면, 전통적인 CSS는 널리 사용되고 성능 면에서 유리하지만, 전역 네임스페이스로 인해 클래스 이름 충돌이 발생할 수 있습니다. 프로젝트의 요구사항에 따라 적절한 방법을 선택하는 것이 중요합니다.

CSS-in-JS란?​

Styled-Components 예제​

장점​

단점​

전통적인 CSS란?​

전통적인 CSS 예제​

장점​

단점​

더 알아보기​

내용 요약​